<!-- 服务区销售排行 -->
<template>
    <div class="dy-panel">
      <div class="dy-panel-main" style="width: 90vh">
        <div class="dy-panel-header">
          <div class="dy-panel-close" @click="closeCurrent"></div>
        </div>
        <div class="dy-panel-content">
          <contentTitle :title="'服务区客流排行'"/>
          <div class="dy-table">
            <table class="pd-table pd-table-transparent">
              <thead>
              <tr>
                <th>排名</th>
                <th>服务区</th>
                <th>状态</th>
                <th>服务区客流排行</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in tableDatas">
                <td>{{item.rn}}</td>
                <td>{{item.compname}}</td>
                <td  class="tooltip-cell" style="position: relative;"><div style="width: 40vh;">
                  <el-progress :percentage="item.rate" :show-text="false" :color="'#35CB9C'" define-back-color="transparent" ></el-progress>
                </div>
                <span class="tooltip-text">客流量：{{ item.count }}</span>
              </td>
                <td>{{item.rank}}</td>
              </tr>
              </tbody>
              <tfoot>
              <tr>
                <td colspan="6">
                  <div class="pagination-page">
                    <div class="page-first" @click="toPage(0)"></div>
                    <div class="page-last" @click="toPage(tableConfit.pageNo - 2)"></div>
                    <div class="page-c">
                      <div v-for="(row,index) in pageBottomDatas" :class="{'page-c-item':true,'cur':(row + 1)===tableConfit.pageNo}" @click="toPage(row)">
                        {{ row + 1 }}
                      </div>
                    </div>
                    <div class="page-next" @click="toPage(tableConfit.pageNo)"></div>
                    <div class="page-end" @click="toPage(tableConfit.total - 1)"></div>
                  </div>
                </td>
              </tr>
              </tfoot>
            </table>
          </div>
        </div>
  
        
        <div class="layer-bottom">
          <div class="pd_abItems-contain">
            <div class="block_select_contain">
              <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                           @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
            </div>
            <div class="pd_abItems-main">
              <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
            </div>
            <el-date-picker style="width: 25vh !important;"
                class="custom-date-picker"
                v-model="today"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <!-- <div class="pd_abItems-main">
              <div v-for="(item,index) in orderByItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="orderByItemsClick(item)">{{item.title}}</div>
            </div> -->
            <div class="pd-abItem-search">
              <button class="pd-abItem-search-btn" @click="search">查询</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import {computed, onMounted, ref} from "vue";
  import ContentTitle from "../contentTitle.vue";
  import {drawLine} from "../../../util/chartUtil.js";
  import {ajaxRequest} from "../../../api/code.js";
  
  
  const emit = defineEmits(['closeChild']);
  const closeCurrent = function (){
    emit('closeChild')
  }
  
  //设置服务区下拉框值
  const selectOptions = ref([{
    id: 24193,
    value: '河北高速燕赵驿行集团有限公司',
    label: '河北高速燕赵驿行集团有限公司',
    children: [{
      id: 349,
      value: '滦州服务区',
      label: '滦州服务区'
    }, {
      id: 0,
      value: '丰润停车区',
      label: '丰润停车区'
    }]
  }])
  
  
  const curServer = ref("")
  
  const serverHandleChange = (selectItem) => {
    curServer.value = selectItem
  }
  
  
  
  const areacode = ref(null)
  
  const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
  const abItemsClick = function (item){
    abItems.value.forEach((res,i)=>{
      res.clazz = res.title === item.title?'selected':"";
    })
  
    if(item.title === '综合'){
      areacode.value = null
    }
    else if(item.title === '东(南)'){
      areacode.value = "01"
    }
    else if(item.title === '西(北)'){
      areacode.value = "02"
    }
  }
  
  const ordercode = ref("desc")
  const orderByItems = ref([{title:'正序',clazz:''},{title:'倒序',clazz:'selected'}])
  const orderByItemsClick = function (item){
    orderByItems.value.forEach((res,i)=>{
      res.clazz = res.title === item.title?'selected':"";
    })
  
    if(item.title === '正序'){
      ordercode.value = "asc"
    }else if(item.title === '倒序'){
      ordercode.value = "desc"
    }
  }
  
  function formatDate(date) {
    function padZero(num) {
      return num < 10 ? '0' + num : num;
    }
    var year = date.getFullYear();
    var month = padZero(date.getMonth() + 1);
    var day = padZero(date.getDate());
    return `${year}-${month}-${day}`;
  }
  
  // 设置本月第一天日期
  const now = new Date();
  const today = ref([new Date(now.getFullYear(), now.getMonth(), 1),new Date()]);
  
  const search = function (){
    console.log(today.value);
    tableConfit.value.pageNo = 1
    loadTable();
  }
  
  
  const tableDatas = ref([{rn:1,compname:'山海关服务区',rate:'84',count: 396,rank:1},
          {rn:2,compname:'卢龙服务区',rate:'76',count: 278,rank:2},
          {rn:3,compname:'滦州服务区',rate:'70',count: 229,rank:3},
          {rn:4,compname:'迁安服务区',rate:'60',count: 189,rank:4},
          {rn:5,compname:'北戴河服务区',rate:'52',count: 127,rank:5},
          {rn:6,compname:'玉田服务区',rate:'45',count: 89,rank:6},
          {rn:7,compname:'丰润服务区',rate:'40',count: 69,rank:7}]);
  const tableConfit = ref({pageNo:1,pageSize:10,total:100});
  const pageBottomDatas = ref([]);
  
  const loadTable = async function (){
        tableDatas.value =[]
  
        // tableDatas.value = []
        let startdate,enddate;
        //手动输入
        if(today.value[0].$d){
          startdate = formatDate(today.value[0].$d)
          enddate = formatDate(today.value[1].$d)
        }else{
          startdate = formatDate(today.value[0])
          enddate = formatDate(today.value[1])
        }
        const params = {
          page: tableConfit.value.pageNo,
          limit: tableConfit.value.pageSize,
          compid: curServer.value?curServer.value[1]:null,
          areacode: areacode.value,
          startdate: startdate,
          enddate: enddate,
          ordertype:ordercode.value
        }
        const res = await ajaxRequest('post', 'getFwqph', params);
  
        // debugger;
        if (res.rows) {
          tableDatas.value = []
          if(res.rows.length>0){
            //总页数
            tableConfit.value.total = calculateTotalPages(res.total,tableConfit.value.pageSize)
          }
          res.rows.forEach((item,i)=>{
            let row = {compname:item.compname,rate:item.rate*100,count:item.count,rank:item.rank}
            tableDatas.value.push(row)
          })
        }
  
        //总页数
        pageBottomDatas.value = [];
        let startPage = (tableConfit.value.pageNo < 10)?0:tableConfit.value.pageNo - 5;
        let entPage = startPage + tableConfit.value.pageSize;
        console.log(startPage,entPage)
        if (entPage > tableConfit.value.total) entPage = tableConfit.value.total;
        for (let m = startPage;m < entPage;m++){
          pageBottomDatas.value.push(m);
        }
  }
  
  //计算总页数
  function calculateTotalPages(totalItems, itemsPerPage) {
      return Math.ceil(totalItems / itemsPerPage);
  }
  
  const toPage = function (curPage){
    if (curPage < 0) curPage = 0
    else if (curPage > tableConfit.value.total) curPage = tableConfit.value.total
    tableConfit.value.pageNo = curPage + 1;
    loadTable();
  }
  
  /**
   * 获取服务区档案信息
   */
   async function getFwqxx() {
    selectOptions.value[0].children = []
    const result = await ajaxRequest('post', 'getFwqxx', {})
    if (result.data && result.data.length>0) {
      result.data.forEach((item,index)=>{
        selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
      })
    }
  }

onMounted(()=>{
  getFwqxx();
  loadTable();
})
  
  
  
  </script>
  
  <style scoped>
  .dy-panel-main{
    padding:2.5vh;
  }
  
  .layer-bottom{
    padding-left:0vh;
    padding-top: 2vh;
    padding-bottom: 1vh;
    border-top: 2px solid #1D4F59;
  }
  
  :deep(.el-input__wrapper){
    background-color: transparent !important;
    color: #FFFFFF !important;
    height: 3vh;
    flex-grow: 0.5 !important;
    width: 15vh;
    margin-right: 2vh;
  }
  :deep(.custom-date-picker){
    width: 10vh !important; /* 确保您的样式被应用 */
  }
  :deep(.el-date-editor .el-range-input){
    color: #FFFFFF !important;
  }
  :deep(.el-date-editor .el-range-separator){
    color: #FFFFFF !important;
  }
  /* .custom-progress .el-progress-bar {
      background-color: transparent;
      border-radius: 100px;
      height: 6px;
      overflow: hidden;
      position: relative;
      vertical-align: middle;
  } */
  ::v-deep .el-progress-bar__outer {
    background-color: transparent !important;
  }
  .tooltip-cell {
  position: relative;
  cursor: help;
}

.tooltip-cell:hover .tooltip-text {
  display: block;
}

.tooltip-text {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 10;
}
  </style>
  